<script lang="ts" setup>
// 导入组件
import { ref, reactive } from "vue";
// 引入Vue组件
import PagnationVue from "../public/Paginations.vue";
// 导入按钮图标
import { Edit, More, Delete } from "@element-plus/icons-vue";
// 导入数据的api
import Api from "../../api";

// 定义当前页面分页的数据
var pageData = reactive({
  page: ref(1),
  size: ref(12),
  total: ref(0),
});

// 定义页面的主要数据
var Data = reactive({
  // 查询区域
  q_str: ref(""),
  // 数据
  branchData: reactive([]),
});

// 定义自动执行的函数
const autoRun = () => {
  // 获取数据
  getData();
};

// 获取所有数据
const getData = () => {
  Api.Branch.getAll({ search: Data.q_str }).then((res) => {
    Data.branchData = res.data;
  });
};

const editValue = (obj: any) => {
  alert(obj.currentTarget.value);
};

const delValue = (obj: any) => {
  alert(obj.currentTarget.value);
};

// 自动执行
autoRun();
</script>

<template>
  <!--1. 查询-->
  <el-form :inline="true" class="demo-form-inline" style="display: flex">
    <el-form-item label="查询条件：" width="100">
      <el-input placeholder="请输入查询条件" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary">
        <el-icon><component class="icons" is="Search"></component></el-icon>
        <span>查询</span>
      </el-button>
      <el-button type="primary">
        <el-icon><component class="icons" is="List"></component></el-icon>
        <span>全部</span>
      </el-button>
      <el-button type="primary">
        <el-icon><component class="icons" is="CirclePlus"></component></el-icon>
        <span>添加</span>
      </el-button>
    </el-form-item>
  </el-form>
  <!--2. 卡片-->
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in Data.branchData">
      <div class="grid-content bg-purple" />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span><b>{{ item.name }}</b></span>
            <div style="display: flex">
              <el-button
                type="warning"
                :value="item.id"
                :icon="Edit"
                circle
                size="small"
                @click="editValue($event)"
              />
              <el-button
                type="danger"
                :value="item.id"
                :icon="Delete"
                circle
                size="small"
                @click="delValue($event)"
              />
            </div>
          </div>
        </template>
        <div style="display: flex; align-items:center;">
            <div style="width: 50%;">工作组：10</div>
            <div style="width: 50%;">工作组：10</div>
        </div>
         <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"
        />
      </el-card>
    </el-col>
  </el-row>
  <!--3. 分页  -->
  <PagnationVue :page="pageData"></PagnationVue>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;

}

.item {

  height: 20px;
  font-size:16px;
}

.el-card {
  margin-bottom: 14px;
}
</style>
